<template>
	<div>
  <div class="head-bar">
    <div class="header-ico">
      <i class="el-icon-s-home"></i>
    </div>
    <div class="logo" style="width: 280px;">软件项目管理在线学习网站</div>
    <div class="head-right">
      <div class="head-user-con">
        <div @click="handleFullScreen" class="btn-fullscreen">
          <el-tooltip
            :content="fullscreen ? `退出全屏` : `全屏`"
            effect="dark"
            placement="bottom"
          >
            <i class="el-icon-rank"></i>
          </el-tooltip>
        </div>

        <router-link to='login' style="color: white;font-size: 20px;">登录</router-link>
      </div>
    </div>
  </div>
  <el-container>
<!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group> -->
  <el-tabs type="border-card" style="width: 100%;">
    <el-tab-pane label="课程介绍">
		  <el-table
		    :data="tableData"
		    border
		    style="width: 100%">
		    <el-table-column
		      prop="id"
		      label="课程id"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="课程名"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="teacher"
		      label="执教老师">
		    </el-table-column>
		  			<el-table-column
		  			  prop="apart"
		  			  label="所属院系">
		  			</el-table-column>
		  			<el-table-column
		  			  prop="grade"
		  			  label="年级">
		  			</el-table-column>
		  			<el-table-column
		  			  prop="score"
		  			  label="学分">
		  			</el-table-column>
		  			<el-table-column
		  			  prop="date"
		  			  label="上课时间">
		  			</el-table-column>
		  </el-table>
	</el-tab-pane>
    <el-tab-pane label="课程内容">
		  <el-table
		    :data="tableData"
		    border
		    style="width: 100%">
		    <el-table-column
		      prop="id"
		      label="课程id"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="name"
		      label="课程名"
		      width="180">
		    </el-table-column>
			<el-table-column
			  prop="content"
			  label="内容"
			  width="1000px">
			</el-table-column>
		  </el-table>
		
	</el-tab-pane>
    <el-tab-pane label="课程实践">
		
		  <el-carousel :interval="4000" type="card" height="200px">
		    <el-carousel-item v-for="item in 6" :key="item">
		      <h3 class="medium">课程实践不仅有利于自身的成长也有利于课程的学习{{ item }}</h3>
		    </el-carousel-item>
		  </el-carousel>
		<el-row :gutter="12">
		  
		  <el-col :span="8" style="float: left;">
		    <el-card shadow="hover" >
		      课程实践案例
		    </el-card>
			<el-card shadow="hover" style="margin-top: 5px;" >
			  课程实践案例
			</el-card>
			<el-card shadow="hover" style="margin-top: 5px;">
			  课程实践案例
			</el-card>
			<el-card shadow="hover" style="margin-top: 5px;">
			  课程实践案例
			</el-card>
			<el-card shadow="hover" style="margin-top: 5px;">
			  课程实践案例
			</el-card>
			<el-card shadow="hover" style="margin-top: 5px;">
			  课程实践案例
			</el-card>
		  </el-col>
		  <el-col :span="8" style="float: left;">
		    <el-card shadow="hover">
		      课程实践案例
		    </el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  </el-col>
		  <el-col :span="8" style="float: left;">
		    <el-card shadow="hover">
		      课程实践案例
		    </el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  			<el-card shadow="hover" style="margin-top: 5px;">
		  			  课程实践案例
		  			</el-card>
		  </el-col>
		  
		</el-row>
		
	</el-tab-pane>
    <el-tab-pane label="教学团队">
		  <el-table
		    :data="tableData"
		    border
		    style="width: 100%">
		    <el-table-column
		      prop="id"
		      label="教师id"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="teacher"
		      label="教师姓名"
		      width="180">
		    </el-table-column>
		    <el-table-column
		      prop="apart"
		      label="所属系">
		    </el-table-column>
		  </el-table>
		
		
		
	</el-tab-pane>
  </el-tabs>
  </el-container>
  </div>
</template>

<script>
export default {
  name: "display",
  data() {
    return {
		tableData: [{
					id:'1',
		            date: '2020-05-02',
		            name: 'C语言程序设计',
		            address: '上海市普陀区金沙江路 1518 弄',
					teacher:'王老师',
					apart:'计算机系',
					grade:'大学三年级',
					score:'3',
					content:'C语言是一种计算机程序设计语言。它既有高级语言的特点，又具有汇编语言的特点。它可以作为系统设计语言，编写工作系统应用程序，也可以作为应用程序设计语言，编写不依赖计算机硬件的应用程序。'
		          }, {
					  id:'2',
		            date: '2020-05-04',
		            name: 'Java程序设计',
		            address: '上海市普陀区金沙江路 1517 弄',
					teacher:'赵老师',
					apart:'计算机系',
					grade:'大学三年级',
					score:'3',
					content:'以Java语言面向对象的编程理念为出发点，循序渐进地介绍Java语言的基本内容，包括基本语法、数组、字符串、类和对象、I/O流和异常处理、用户界面类和Applet、网络和多线程编程；同时还着重介绍几种Java核心技术及相应的开发实例，包括JDBC、Servlet、JSP和EJB。通过融入Java面向对象的编程思想，使读者在学习理论知识的同时，初步掌握面向对象的系统分析、设计与开发能力，为大型软件的设计和开发奠定基础。'
		          }, {
					  id:'3',
		            date: '2020-05-01',
		            name: '数据库实用技术',
		            address: '上海市普陀区金沙江路 1519 弄',
					teacher:'孙老师',
					apart:'计算机系',
					grade:'大学三年级',
					score:'3',
					content:'以目前流行的Oracle数据库系统为平台,通过大量的实例,讲解数据库应用系统中的实用技术。最后一章给出基于Oracle系统的一个完整实例“进销存系统”,此实例融会全书的知识点,并描述了实际应用系统中数据库系统设计的全过程。'
		          }, {
					  id:'4',
		            date: '2020-05-03',
		            name: 'ASP.NET开发',
		            address: '上海市普陀区金沙江路 1516 弄',
					teacher:'李老师',
					apart:'计算机系',
					grade:'大学三年级',
					score:'3',
					content:'ASP.NET又称为ASP+，不仅仅是ASP的简单升bai级，而是微软公司推出的新一du代脚本语言。ASP.NET基于.NET Framework的Web开发zhi平台dao，不但吸收了ASP以前版本的最大优点并参照Java、VB语言的开发优势加入了许多新的特色，同时也修正了以前的ASP版本的运行错误。ASP.NET就是属于WebForm，也就是平时说的B/S模式的开发。而WinForm就是属于C/S模式。'
		          }],
		tabPosition: 'left',
      fullscreen: false
    };
  },
  computed: {
    username() {
      return this.$store.state.status.username;
    }
  },
  methods: {
	  handleOpen(key, keyPath) {
	          console.log(key, keyPath);
	        },
	        handleClose(key, keyPath) {
	          console.log(key, keyPath);
	        },
    // handleCommand(command) {
    //   if (command === "logout") {
    //     logout().then(() => {
    //       this.$store.commit("logout");
    //       this.$message.success("注销成功");
    //       this.$router.push("/login");
    //     });
    //   }
    // },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>
<style scoped>
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 14px;
	    opacity: 0.75;
	    line-height: 200px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
	.border-card{
		width: 100%;
		height: 100%;
	}
	.el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 400px;
	  }
	.el-main {
	    background-color: #E9EEF3;
	    color: #333;
	    text-align: center;
	    height:600px;
		width: 600px;
	  }
	  
	  body > .el-container {
	    margin-bottom: 40px;
	  }
	  .div1{
		  width: 125px;
		  height: 125px;
		  background-color: #00ABFF;
	  }
.head-bar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  color: #fff;
  background-color: #242f42;
}

.header-ico {
  float: left;
  padding: 0 21px;
  line-height: 70px;
}

.head-bar .logo {
  float: left;
  width: 250px;
  line-height: 70px;
}

.head-right {
  float: right;
  padding-right: 50px;
}

.head-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}

.btn-fullscreen {
  transform: rotate(45deg);
  margin-right: 5px;
  font-size: 24px;
}

.btn-fullscreen {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}

.btn-bell .el-icon-bell {
  color: #fff;
}

.user-name {
  margin-left: 10px;
}

.user-avatar {
  margin-left: 20px;
}

.user-avatar img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-dropdown-link {
  color: #fff;
  cursor: pointer;
}

.el-dropdown-menu__item {
  text-align: center;
}
</style>
